//邮件组管理--编辑
import { Button, Form, Input, Table, Space, Modal, } from 'antd';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { useEffect, useState, FC, ReactNode } from 'react';
import type { ColumnsType } from 'antd/lib/table';
import './index.css'
interface DataType {
  key: string;  //序号
  userName: string;  //姓名 
  userId: string;//工号
  workHome: string;//所属单位
  emall: string;//操作人
  phone: string;//更新时间

}
const MailManagement: FC = () => {
  //创建表单实例
  const [form] = Form.useForm();
  //弹框控制
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true)

  };
  const ss = () => {
    console.log(22);
  }
  const selectname = () => { }
  const resetit = () => { }
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns: ColumnsType<DataType> = [
    {
      title: '顺序',
      align: 'center',
      dataIndex: 'key',

    },

    {
      title: '姓名',
      dataIndex: 'userName',
      align: 'center',
    },
    {
      title: '工号',
      dataIndex: 'userId',
      align: 'center',
    },

    {
      title: '所属单位',
      dataIndex: 'workHome',
      align: 'center',
    },
    {
      title: '邮箱',
      dataIndex: 'emall',
      align: 'center',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <span style={{ color: 'red' }} onClick={ss}>删除</span>

        </Space>
      ),

    },

  ]
  const data: DataType[] = [
    {
      key: '1',
      userId: '001',
      userName: '枫叶',
      workHome: '某公司某部门',
      emall: 'fengye@163.com',
      phone: '12321545646',
    },
    {
      key: '2',
      userId: '002',
      userName: '枫叶1',
      workHome: '某公司某部门',
      emall: 'fengye@163.com',
      phone: '12321542346',
    },
    {
      key: '3',
      userId: '124',
      userName: '枫叶1',
      workHome: '某公司某部门',
      emall: 'fengye@163.com',
      phone: '12321542346',
    },
    {
      key: '4',
      userId: '323',
      userName: '枫叶3',
      workHome: '某公司某3部门',
      emall: 'fengye@163.com',
      phone: '12322346',
    },
    {
      key: '5',
      userId: '323',
      userName: '枫叶3',
      workHome: '某公司某3部门',
      emall: 'fengye@163.com',
      phone: '12322346',
    },
    {
      key: '6',
      userId: '323',
      userName: '枫叶3',
      workHome: '某公司某3部门',
      emall: 'fengye@163.com',
      phone: '12322346',
    },

  ];

  return <>
    {/* 邮件组管理  */}
    {/* 搜索，查询框 */}

    <Form form={form} layout="inline" className='btnStyel addpp'>
      <Form.Item >邮件组代号:<Input className='inp' /></Form.Item>
      <Form.Item >邮件组名称:<Input className='inp' /></Form.Item>
      <Form.Item >邮件组说明:<Input className='inp' /></Form.Item>

    </Form>
    <span style={{ marginTop: '20px' }}><i>||</i>添加人员</span>
    <hr />
    <div style={{ margin: '2rem 0 1rem 0' }}><Input style={{ width: '20%' }} placeholder='请输入成员姓名'></Input>
      <Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)', marginLeft: '20px' }} onClick={selectname}>查询</Button>
      <div style={{ float: 'right' }}><Button style={{ margin: '0.25rem' }} type="primary" onClick={showModal}>+添加成员</Button></div>

    </div>

    <Table

      columns={columns}
      dataSource={data}
      bordered
      pagination={false}
      scroll={{ y: 200 }}

    />

    <Modal title="新增角色" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Form
        labelCol={{ span: '5' }}
        wrapperCol={{ span: '16' }}
      >

        <Form.Item label="姓名">
          <Input />
        </Form.Item>
        <Form.Item label="工号">
          <Input />
        </Form.Item>
        <Form.Item label="所属单位">
          <Input />
        </Form.Item>
        <Form.Item label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item label="电话">
          <Input />
        </Form.Item>


      </Form>
    </Modal>
  </>
}

export default MailManagement